import React, { PureComponent } from 'react';
import Link from 'umi/link';
import { connect } from 'dva';
import Authorized from '@/utils/Authorized';
import { FormattedMessage } from 'umi/locale';
import { Layout, Menu, Row, Col } from 'antd';
import router from 'umi/router';
import RightContent from './RightContent';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import logo from '@/assets/logo.svg';
import styles from './index.less';

const { Header } = Layout;
const { Item } = Menu;

@connect(({ paper, user }) => ({
  currentUser: user.currentUser,
  userInfo: user.userInfo,
}))
class competitionPreview extends PureComponent {

  constructor(props) {
    super(props);
    const { match, location } = props;
    const menuMap = {
      publicity: (
        <FormattedMessage id="preview.competition.menuMap.publicity" defaultMessage="竞赛宣传页" />
      ),
      enroll: (
        <FormattedMessage id="preview.competition.menuMap.enroll" defaultMessage="报名信息页" />
      ),
      paper: (
        <FormattedMessage id="preview.competition.menuMap.questionPaper" defaultMessage="竞赛题目" />
      ),
      result: (
        <FormattedMessage id="preview.competition.menuMap.result" defaultMessage="竞赛结果" />
      ),
    };
    const key = location.pathname.replace(`${match.path}/`, '');
    this.state = {
      mode: 'horizontal',
      menuMap,
      selectKey: menuMap[key] ? key : 'publicity',
    };
  }

  componentDidMount() {
    const {
      dispatch,
    } = this.props;
    dispatch({
      type: 'user/fetchCurrent',
    });
    dispatch({
      type: 'user/getUserInfo',
    });
  }

  

  getmenu = () => {
    const { menuMap } = this.state;
    return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);
  };

  getRightTitle = () => {
    const { selectKey, menuMap } = this.state;
    return menuMap[selectKey];
  };

  selectKey = ({ key }) => {
    const { match: { params: { id } } } = this.props;
    router.push(`/preview/competition/${id}/${key}`);
    this.setState({
      selectKey: key,
    });
  };

  render() {
    const { match: { params: { id } }, children } = this.props;
    const { mode, selectKey } = this.state;

    return (
      <Layout>
        <Header style={{ padding: 0 }}>
          <div className={styles.head}>
            <div
              ref={ref => {
                this.maim = ref;
              }}
              className={`${styles.main}`}
            >
              <div className={styles.left}>
                <div className={styles.logo} key="logo" id="logo">
                  <Link to="/">
                    <img src={logo} alt="logo" />
                    <h1>竞赛管理系统</h1>
                  </Link>
                </div>
              </div>
              <RightContent {...this.props} />
            </div>
          </div>
        </Header>
        <GridContent>
          <div
            className={styles.menumain}
            ref={ref => {
              this.main = ref;
            }}
          >
            <div className={styles.topmenu}>
              <Authorized authority="admin">
                <Menu
                  mode={mode}
                  selectedKeys={[selectKey]}
                  onClick={this.selectKey}
                  className={mode === 'horizontal' ? 'top-nav-menu' : ''}
                >
                  {this.getmenu()}
                </Menu>
              </Authorized>
            </div>
            <div className={styles.right}>
              {children}
            </div>

          </div>

        </GridContent>
      </Layout>

    )
  }


}
export default competitionPreview;